import React from 'react';
import PropTypes from 'prop-types';
import css from './index.less';
import classNames from 'classnames';
import Linear from '../linear';

export default class SkuSelectorBox extends React.Component {
  static propsTypes = {};
  static defaultProps = {
    skuProps: [
      {
        'propId': '21433',
        'propName': '尺寸',
        'isImage': false,
        'values': [{'valueId': '32652', 'name': '20寸'},
          {'valueId': '47565', 'name': '24寸'}],
      }, {
        'propId': '1627207',
        'propName': '颜色分类',
        'isImage': true,
        'values': [{
          'valueId': '30995096',
          'name': '银色拉丝',
          'imgUrl': 'http://gd2.alicdn.com/bao/uploaded/i2/287745076/TB2mPWSdUsIL1JjSZPiXXXKmpXa_!!287745076.jpg'
        }, {
          'valueId': '92258313',
          'name': '玫瑰金拉丝',
          'imgUrl': 'http://gd1.alicdn.com/bao/uploaded/i1/287745076/TB2xkykdjJTMKJjSZFPXXbHUFXa_!!287745076.jpg'
        }]
      }],
    otherState: {
      '21433': '32652',
      '1627207': '',
    },
    onClick: (propName, propValue, propImg) => {
      console.log(propName, propValue, propImg);
    }
  };

  renderSkuRow = (item, idx) => {
    const {otherState} = this.props;
    const props = {
      key: idx,
      className: classNames([css.skuRow, item.isImage ? css.withImage : css.common]),
    };

    const renderImage = (commonProps, i) => {
      const imgProps = {
        ...commonProps,
        src: i.imgUrl,
      };
      return <img {...imgProps}/>;
    };
    const renderText = (commonProps, i) => {
      const textProps = {
        ...commonProps,
        children: i.name,
      };
      return <div {...textProps} />;
    };

    return (
      <div {...props}>
        <div className={css.header}>{item.propName}</div>
        <div className={css.body}>
          {
            item.values.map(i => {
              const commonProps = {
                key: i.valueId,
                onClick: () => this.props.onClick(item.propId, i.valueId, i.imgUrl), // 加了图片对应改变
                className: classNames([otherState[item.propId] === i.valueId ? css.active : '']),
              };
              if (i.imgUrl) {
                return renderImage(commonProps, i);
              }
              return renderText(commonProps, i);
            })
          }
        </div>
      </div>
    );
  };

  render() {
    const {skuProps} = this.props;
    return (
      <div className={css.skuWrapper}>
        <div className={css.placeholder}/>
        {
          skuProps.map((i, idx) => {
            return this.renderSkuRow(i, idx);
          })
        }
        <Linear style={{
          marginBottom: '18px',
        }}/>
      </div>
    );
  }
}
